import React, {useEffect, useState} from 'react'
import {NavigationStackScreenComponent} from 'react-navigation-stack'
import {View, Text, TouchableOpacity, Image, Alert} from 'react-native'
import {commonStyle, translateSize} from 'styles'
import {idCardIdentityStyle} from './style'
import assets from 'modules/assets'
import {PosModule} from 'native-modules'
import pos from 'api/pos'
import {operate} from '../../services/authorization'

const IDCardIdentityScreen: NavigationStackScreenComponent<{nextRouteName: string}> = props => {
  const [readStatus, setReadStatus] = useState<
    'isReady' | 'reading' | 'success' | 'fail' | 'error'
  >('isReady')
  const [hints, setHints] = useState({
    isReady: '正在配置中...',
    reading: '正在读卡...',
    success: '读卡成功',
    fail: '读卡失败,请重新放置身份证',
    error: '读卡失败',
  })

  const readCard = () => {
    // Alert.alert('11')
    setReadStatus('isReady')
    PosModule.readCardInfo(
      msg => {
        setHints({...hints, reading: msg})
        setReadStatus('reading')
      },
      err => {
        setReadStatus('fail')
      },
    )
      .then(res => {
        setReadStatus('success')
        PosModule.stopReadCard()
        props.navigation.push('IdentityDetail', {
          nextRouteName: props.navigation.getParam('nextRouteName'),
          data: res,
          onReadAgain: () => {
            readCard()
          },
        })
      })
      .catch(err => {
        setReadStatus('error')
        PosModule.stopReadCard()
      })
  }

  useEffect(() => {
    readCard()
    return () => {
      PosModule.stopReadCard()
    }
  }, [])

  return (
    <View style={[commonStyle.containerColumn, idCardIdentityStyle.container]}>
      <Text style={idCardIdentityStyle.hintFont}>{hints[readStatus]}</Text>
      <Image style={idCardIdentityStyle.cardImage} source={assets.images.card} />
      <View style={idCardIdentityStyle.hintContainer}>
        <Image style={idCardIdentityStyle.hintIcon} source={assets.images.icon_id_hint_info} />
        <Text style={idCardIdentityStyle.hintTitle}>请刷身份证</Text>
      </View>
      <Text style={idCardIdentityStyle.hintContent}>
        如果长时间未能识别身份证或需识别非身份证件，请手动输入
      </Text>
      <View style={idCardIdentityStyle.btnContainer}>
        <Text style={[idCardIdentityStyle.hintContent, idCardIdentityStyle.btnTiltle]}>
          身份证：
        </Text>
        <TouchableOpacity
          onPress={() => {
            operate()
            PosModule.stopReadCard()
            props.navigation.navigate('InputIdentity', {
              nextRouteName: props.navigation.getParam('nextRouteName'),
              type: 'idcard',
            })
          }}>
          <Text style={idCardIdentityStyle.btn}>请输入身份证号</Text>
        </TouchableOpacity>
      </View>
      <View style={idCardIdentityStyle.btnContainer}>
        <Text style={[idCardIdentityStyle.hintContent, idCardIdentityStyle.btnTiltle]}>
          手机号：
        </Text>
        <TouchableOpacity
          onPress={() => {
            operate()
            PosModule.stopReadCard()
            props.navigation.navigate('InputIdentity', {
              nextRouteName: props.navigation.getParam('nextRouteName'),
              type: 'telphont',
            })
          }}>
          <Text style={idCardIdentityStyle.btn}>请输入手机号码</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

IDCardIdentityScreen.navigationOptions = props => {
  return {
    title: '刷身份证',
    headerStyle: {
      margin: translateSize(0),
      elevation: 0,
      borderBottomWidth: 1,
      borderBottomColor: '#2C417A',
      backgroundColor: '#2C417A',
    },
  }
}

export default IDCardIdentityScreen
